<!DOCTYPE html>
<html>
<head>
    <title>客户信息</title>
    <#include "/header.html">
    <script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.core.js"></script>
    <script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.exhide.js"></script>
    <script src="${request.contextPath}/statics/plugins/ztree/fuzzysearch.js"></script>
    <script src="${request.contextPath}/statics/libs/bootstrap-datetimepicker.min.js"></script>
    <script src="${request.contextPath}/statics/libs/ajaxupload.js"></script>
    <style>
        /*
        .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
            white-space: pre-wrap;
        }

        .ui-jqgrid .ui-jqgrid-htable .ui-th-div {
            height: auto;
        }*/
        html {
            /*overflow-x:hidden; */
            /*overflow: scroll;*/
        }
    </style>

</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="form-inline" style="padding: 5px 0px;">
            <div class="col-sm-1" style="padding-left:5px;padding-right:5px;">
                <select v-model="q.key" class="form-control" name="selQueryKey" id="selQueryKey">
                    <option value="">查询条件</option>
                    <option :value="list.code" v-for="(list,index) in searchKeyDictInfo" :key="index">{{ list.value }}</option>
                </select>
            </div>
            <div class="col-sm-2">
                <div class="input-group">
                <input type="text" class="form-control" v-model="q.value" @keyup.enter="query" placeholder="输入查询内容">
                <span class="input-group-btn">
                       <a id="inputClear" class="glyphicon glyphicon-remove btn form-control-feedback btn-default" style="pointer-events: auto;"></a>
                </span>
            </div>
            </div>
            <div class="btn-group">
            <a class="btn btn-primary" @click="query" style="margin-left:10px;"><i class="fa fa-search"></i>&nbsp;查询</a>
			<#if shiro.hasPermission("water:tclientinfo:save")>
                <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
			</#if>
            <script>hasSaveOrUpdatePermission = false;</script>
			<#if shiro.hasPermission("water:tclientinfo:update")>
                <script>hasSaveOrUpdatePermission = true;</script>
                <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
			</#if>

            <#if shiro.hasPermission("water:tclientinfo:update1")>
                <a class="btn btn-primary" @click="update1"><i class="fa fa-pencil"></i>&nbsp;售后维护</a>
            </#if>

			<#if shiro.hasPermission("water:tclientinfo:delete")>
            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
			</#if>
            <a class="btn btn-primary" @click="outxls"><i class="fa fa-download"></i>&nbsp;导出</a>

            <#if shiro.hasPermission("water:tclientinfo:update")>
                <a class="btn btn-primary" @click="download"><i class="fa fa-file-excel-o"></i>&nbsp;下载模板</a>
                <a class="btn btn-primary" id="upload"><i class="fa fa-upload"></i>&nbsp;导入模板</a>
            </#if>

        <a class="btn btn-primary" @click="queryDupClientInfo"><i class="fa fa-registered"></i>&nbsp;检查重复表卡编号</a>
</div>
        </div>
        <div id="content" class="row-fluid" >
            <div class="col-md-2 panel panel-default">
                <input type="text" id="treeSearchKey" value="" class="empty" placeholder="请输入关键字"/>
                <ul id="deptTreeLeft" class="ztree"></ul>
            </div>
            <div class="col-md-10">
                <table id="jqGrid"></table>
                <div id="jqGridPager"></div>
            </div>
        </div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <div class="panel-body" id = "info_div">
            <div class="panel panel-info">
                <div class="panel-heading">客户信息</div>
                <div class="panel-body">
                    <div class="form-inline">
                    <div class="input-group">
                        <span class="input-group-addon">表卡编号</span>
                        <input type="text" class="form-control" v-model="tClientInfo.clientId" placeholder="表卡编号" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">客户名称</span>
                        <input type="text" class="form-control" v-model="tClientInfo.clientName" placeholder="客户名称" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">用户性别</span>
                        <input type="text" class="form-control" v-model="tClientInfo.clientSex" placeholder="性别" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">用户年龄</span>
                        <input type="text" class="form-control" v-model="tClientInfo.clientAge" placeholder="年龄" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">身份证号</span>
                        <input type="text" class="form-control" v-model="tClientInfo.clientIdCard" placeholder="身份证号" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">公安地址</span>
                        <input type="text" class="form-control" v-model="tClientInfo.proName" placeholder="小区名称" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">小区楼号</span>
                        <input type="text" class="form-control" v-model="tClientInfo.buildNum" placeholder="楼号" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">小区单元</span>
                        <input type="text" class="form-control" v-model="tClientInfo.unitNum" placeholder="单元" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">门牌号码</span>
                        <input type="text" class="form-control" v-model="tClientInfo.houseNum" placeholder="门牌号码" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">小区名称</span>
                        <input type="text" class="form-control" v-model="tClientInfo.memo1" placeholder="小区名称" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">备注项02</span>
                        <input type="text" class="form-control" v-model="tClientInfo.memo2" placeholder="备注2" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">备注项03</span>
                        <input type="text" class="form-control" v-model="tClientInfo.memo3" placeholder="备注3" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">户二维码</span>
                        <input type="text" class="form-control" v-model="tClientInfo.qrcode" placeholder="二维码" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">账本信息</span>
                        <input type="text" class="form-control" v-model="tClientInfo.accountNo" placeholder="账本" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">检索号码</span>
                        <input type="text" class="form-control" v-model="tClientInfo.searchNo" placeholder="检索号" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">电话号码</span>
                        <input type="text" class="form-control" v-model="tClientInfo.phone" placeholder="电话" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">设备口径</span>
                        <input type="text" class="form-control" v-model="tClientInfo.calibre" placeholder="口径" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">用户性质</span>
                        <input type="text" class="form-control" v-model="tClientInfo.clientType" placeholder="用户性质" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">设备代码</span>
                        <input type="text" class="form-control" v-model="tClientInfo.deviceCode" placeholder="设备代码" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">小楼编号</span>
                        <input type="text" class="form-control" v-model="tClientInfo.buildingNo" placeholder="小楼号" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">所在楼层</span>
                        <input type="text" class="form-control" v-model="tClientInfo.floorNo" placeholder="所在楼层" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">其他码</span>
                        <input type="text" class="form-control" v-model="tClientInfo.otherNo" placeholder="其他码" <#if shiro.hasPermission("water:tclientinfo:update1")>readonly</#if>/>
                    </div>
                </div>
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">现场维护信息</div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">表盘号</span>
                            <input type="text" class="form-control" v-model="tClientInfo.meterCode" placeholder="表盘号"/>
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">表封号</span>
                            <input type="text" class="form-control" v-model="tClientInfo.stampCode" placeholder="表封号"/>
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">换表时指针数</span>
                            <input type="text" class="form-control" v-model="tClientInfo.desc3" placeholder="换表时指针数"/>
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">现场记录</span>
                            <input type="text" class="form-control" v-model="tClientInfo.desc7" placeholder="现场记录"/>
                        </div>
                    </div>
                </div>
            </div>

            <#if shiro.hasPermission("water:tclientinfo:update")>
            <input type="button" class="btn btn-primary" id="btnSaveOrUpdate" data-loading-text="保存中..."
                   @click="saveOrUpdate" value="确定"/>
            </#if>
            <#if shiro.hasPermission("water:tclientinfo:update1")>
            <input type="button" class="btn btn-primary" id="btnSaveOrUpdate1" data-loading-text="保存维护信息中..."
                   @click="saveOrUpdate1" value="保存维护信息"/>
            </#if>
            <input type="button" class="btn btn-warning" @click="reload" value="返回"/>
    </div>
</div>
    <!-- 模态框（Modal） -->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">导入进度</h4>
                </div>
                <div class="modal-body">
                    <span class="label">&nbsp;</span>
                    <div class="progress" style="height: 30px;">
                        <div id="probar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width:0%;padding-top: 5px;">
                            <span style="font-size: 30px;">{{progressbar}}</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-danger" v-show="progressbar>0">
                        <i class="fa fa-forward"></i>&nbsp;导入数量&nbsp;&nbsp;<span class="badge">{{progressbar}}</span></a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

<div id = "dupClientInfoLayer" style="display: none;">
    <table id="jqGridDup"></table>
    <div id="jqGridDupPager"></div>
</div>

    <div id="clientInfoLayer" style="display: none;padding:10px;">

        <div class="tabbable"> <!-- Only required for left/right tabs -->
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">客户主要信息</a></li>
            <li><a href="#tab2" data-toggle="tab">二级管理信息</a></li>
            <li><a href="#tab3" data-toggle="tab">设备相关信息</a></li>
            <li><a href="#tab4" data-toggle="tab">其他附加信息</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-2 control-label">小区名称</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.memo1" placeholder="小区名称" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">公安地址</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.proName" placeholder="公安地址"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">楼号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.buildNum" placeholder="楼号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">单元</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.unitNum" placeholder="单元"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">门牌号码</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.houseNum" placeholder="门牌号码"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">小楼号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.buildingNo" placeholder="小楼号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">楼层</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.floorNo" placeholder="楼层"/>
                        </div>
                    </div>

                </form>
            </div>
            <div class="tab-pane" id="tab2">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-2 control-label">查询（客户）号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.clientId" placeholder="查询（客户）号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">客户名称</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.clientName" placeholder="客户名称"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">表盘号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.meterCode" placeholder="表盘号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">表封号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.stampCode" placeholder="表封号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">口径</div>
                        <div class="col-sm-10">
                            <select v-model="tClientInfo.calibre" class="form-control" name="selDevicecalibre" id="selDevicecalibre">
                                <option value="">选择水表口径</option>
                                <option :value="list.code" v-for="(list,index) in clientCalibre" :key="index">{{ list.value }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">安装日期</div>
                        <div class="col-sm-10">
                            <div class='input-group date' >
                                <input id='datetimepicker1' type="text" class="form-control" v-model="tClientInfo.desc1" placeholder="安装日期"/>
                                <span class="input-group-addon">
                                     <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">使用性质</div>
                        <div class="col-sm-10">
                            <select v-model="tClientInfo.desc2" class="form-control" name="selDeviceMode" id="selDeviceMode">
                                <option value="">选择使用性质</option>
                                <option :value="list.code" v-for="(list,index) in clientUseInfo" :key="index">{{ list.value }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">换表时指针数</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.desc3" placeholder="换表时指针数"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane" id="tab3">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-2 control-label">设备号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.deviceId" placeholder="设备号" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">IMEI</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.clientIdCard" placeholder="IMEI"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">SIM卡号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.desc16" placeholder="SIM卡号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">水表类型</div>
                        <div class="col-sm-10">
                            <select v-model="tClientInfo.desc4" class="form-control" name="selMeterType" id="selMeterType">
                                <option value="">选择水表类型</option>
                                <option :value="list.code" v-for="(list,index) in clientMeterTypeInfo" :key="index">{{ list.value }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">安装位置</div>
                        <div class="col-sm-10">
                            <select v-model="tClientInfo.desc5" class="form-control" name="selMeterFixAddr" id="selMeterFixAddr">
                                <option value="">选择安装位置</option>
                                <option :value="list.code" v-for="(list,index) in clientFixAddrInfo" :key="index">{{ list.value }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">质保开始日期</div>
                        <div class="col-sm-10">
                            <div class='input-group date' >
                                <input id='datetimepicker2' type="text" class="form-control" v-model="tClientInfo.desc6" placeholder="质保开始日期"/>
                                <span class="input-group-addon">
                                     <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">现场记录</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.desc7" placeholder="现场记录"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">主机通道</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="clientDeviceInfo.masterNum" placeholder="主机通道"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">二管号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="clientDeviceInfo.slaveNum" placeholder="二管号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">采集板号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="clientDeviceInfo.cardNum" placeholder="采集板号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">通道号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="clientDeviceInfo.routeNum" placeholder="通道号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">表号</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="clientDeviceInfo.meterNum" placeholder="表号"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane" id="tab4">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-2 control-label">备注2</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.memo2" placeholder="备注2"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">备注3</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.memo3" placeholder="备注3"/>
                        </div>
                    </div>
                    <!--
                    <div class="form-group">
                        <div class="col-sm-2 control-label">二维码</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.qrcode" placeholder="二维码"/>
                        </div>
                    </div>-->
                    <div class="form-group">
                        <div class="col-sm-2 control-label">账本</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.accountNo" placeholder="账本"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">电话</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.phone" placeholder="电话"/>
                        </div>
                    </div>
                    <!--
                    <div class="form-group">
                        <div class="col-sm-2 control-label">其他码</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.otherNo" placeholder="其他码"/>
                        </div>
                    </div>-->
                    <div class="form-group">
                        <div class="col-sm-2 control-label">出账</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.desc8" placeholder="出账"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">维护人员</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.desc9" placeholder="维护人员"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">维护人员电话</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="tClientInfo.desc10" placeholder="维护人员电话"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</div>
<script src="${request.contextPath}/statics/js/modules/water/tclientinfo.js?_${.now?long}"></script>
</body>
</html>


